<template>
    <div class="party_buding">
        <service :isShow="dialogFormVisible" @close='closeDialog' :titleDialog='titles'></service>
      
        <div class="sibian1">
            <img src="../assets/dangjian.png" alt="" style=" display：inline-block;   margin-top: 0.2rem;
 width:0.25rem;height:0.25rem;">
            <span style=" display：inline-block;   margin-top: 0.2rem; padding-left:0.12rem;">党建引领</span>
        </div>
        <div class="p_d_c flex">
            <div class="p_d_c_left">
                <div class="p_d_c_left_content flex_c" @click="partyYiling">
                    <span>党支部</span>
                    <span>{{list.dangzhibu}}</span>
                </div>
                 <div class="p_d_c_left_content flex_c" @click="partyYiling">
                    <span>党员</span>
                     <span>{{list.dangyuan}}</span>
                </div>
                 <div class="p_d_c_left_content flex_c" @click="partyYiling">
                    <span>预备党员</span>
                     <span>{{list.yubei}}</span>
                </div>
                 <div class="p_d_c_left_content flex_c" @click="partyYiling">
                    <span>群众</span>
                     <span>{{list.qunzhong}}</span>
                </div>
            </div>
            <div class="p_d_c_right">
                <div class="charts" id="echarts1" style="width:1rem;height:1.3rem;"></div>
                <div class="charts" id="echarts2" style="width:1rem;height:1.3rem;"></div>
                <div class="charts" id="echarts3" style="width:1rem;height:1.3rem;"></div>
                <div class="charts" id="echarts4" style="width:1rem;height:1.3rem;"></div>
            </div>
        </div>
    </div>
</template>

<script>
import service from "@/components/managePeople";
import echartMixins from "@/utils/resizeMixins";
import {dz} from "@/api/index.js";
const echarts = require("echarts");
export default {
  data() {
    return {
      dialogFormVisible:false,
      titles:'',
      list: [
      ],
      list1:[],
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null
    };
  },
  components:{
service
  },
  mounted() {
    this.chart1 = echarts.init(document.getElementById("echarts1"));
    this.chart2 = echarts.init(document.getElementById("echarts2"));
    this.chart3 = echarts.init(document.getElementById("echarts3"));
    this.chart4 = echarts.init(document.getElementById("echarts4"));
    this.draw1();
    this.draw2();
    this.draw3();
    this.draw4();
    this.dzz()
  },
  methods: {
    async dzz(){
      try {
        const {data }  = await dz()
        console.log(data)
        this.list=data.date
      } catch (error) {
        console.log(error)
    }
    },

    closeDialog(){
      this.dialogFormVisible=false
    },
    partyYiling(){
      this.dialogFormVisible=true
      this.titles='网格力量列表'
    },
    draw1() {
      let self = this;
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        self.chart1.setOption({
          title: {
            text: "25%",
            x: "center",
            y: "center",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "12"
            }
          },
          color: ["#E10012", "#5CD5F4"],
          series: [
            {
              type: "pie",
              radius: ["50%", "60%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center"
              },
              data: [
                { value: 25, name: "直接访问" },
                { value: 75, name: "邮件营销" }
              ],
              roundCap: 1 //可选项为1和2，不填则采用原有拼接方式
            }
          ]
        });
      });
    },
    draw2() {
      let self = this;
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        self.chart2.setOption({
          title: {
            text: "25%",
            x: "center",
            y: "center",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "12"
            }
          },
          color: ["#5CD5F4", "#0C4886"],
          series: [
            {
              type: "pie",
              radius: ["50%", "60%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center"
              },
              data: [
                { value: 25, name: "直接访问" },
                { value: 75, name: "邮件营销" }
              ],
              roundCap: 1 //可选项为1和2，不填则采用原有拼接方式
            }
          ]
        });
      });
    },
    draw3() {
      let self = this;
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        self.chart3.setOption({
          title: {
            text: "75%",
            x: "center",
            y: "center",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "12"
            }
          },
          color: ["#8841C1", "#5947AA"],
          series: [
            {
              type: "pie",
              radius: ["50%", "60%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center"
              },
              data: [
                { value: 335, name: "直接访问" },
                { value: 310, name: "邮件营销" }
              ],
              roundCap: 1 //可选项为1和2，不填则采用原有拼接方式
            }
          ]
        });
      });
    },
    draw4() {
      let self = this;
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        self.chart4.setOption({
          title: {
            text: "50%",
            x: "center",
            y: "center",
            textStyle: {
              fontWeight: "normal",
              color: "#fff",
              fontSize: "12"
            }
          },
          color: ["#695A3D", "#F3CA7"],
          series: [
            {
              type: "pie",
              radius: ["50%", "60%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center"
              },
              data: [
                { value: 50, name: "直接访问" },
                { value: 50, name: "邮件营销" }
              ],
              roundCap: 1 //可选项为1和2，不填则采用原有拼接方式
            }
          ]
        });
      });
    }
  },
  destroyed() {
    window.onresize = null;
  },
  mixins: [echartMixins]
};
</script>
<style lang="scss">
.party_buding {
  width:93%;
  // background: #031138;
  margin: auto;
  .sibian1{
  height: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size:0.2rem}
}
.p_d_c_left {
  width: 100%;
  .p_d_c_left_content {
    cursor: pointer;
    width: 1.55rem;
    height: 0.3rem;
    margin-top: 0.3rem;
    margin-right: 0.02rem;
    background: #030244;
    border: 1px solid #0808b8;
    margin-left: 0.07rem;
    span {
      width: 50%;
      text-align: center;
      padding-left: 0.04rem;
      color: #FFF;
      font-size: 0.18rem;
    }
  }
}
.p_d_c_right {
  width: 5.4rem;
  height: 2.2rem;

  border: 1px solid #2868af;
  display: flex;
  display: -webkit-flex;
  
  align-items: center;
  margin-top: 0.2rem;
  flex-direction: row;
  flex-wrap: wrap;
  .charts {
      margin-bottom: -0.2rem;
  }
}
</style>

